import React from 'react';
export default () => {
    const [output1, setOutput1] = React.useState<any>()
    const [output2, setOutput2] = React.useState('')
    const onInput1Change = (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0] as Blob
        const reader = new FileReader()
        reader.onload = function () {
            setOutput1(reader.result)
        }
        reader.readAsDataURL(file)
    }
    const onInput2Change = (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0] as Blob
        const imgUrl = window.URL.createObjectURL(file)
        setOutput2(imgUrl)
    }
    return (
        <div>
            <h3>1. DataUrl方式：</h3>
            <input type="file" accept="images/*" onChange={onInput1Change}></input>
            <img src={output1} alt="" />

            <h3>2. Blob方式：</h3>
            <input type="file" accept="images/*" onChange={onInput2Change}></input>
            <img src={output2} alt="" />
        </div>
    )
}